<template>
  <div class="profile-page">

    <!-- 导航标签 -->
    <div class="nav-tabs">
      <div class="tabs-container">
        <div class="tab">附近</div>
        <div class="tab">关注</div>
        <div class="tab active">推荐</div>
        <div class="tab">情侣</div>
      </div>
      <div class="topic-square">话题广场</div>
    </div>

    <!-- 话题卡片区域 -->
    <div class="topic-cards">
      <div class="topic-card">
        <div class="avatar-group">
          <img src="/placeholder.svg?height=24&width=24" alt="User 1" />
          <img src="/placeholder.svg?height=24&width=24" alt="User 2" />
        </div>
        <div class="topic-content">
          <div class="topic-title">衣品坊</div>
          <div class="topic-status">绿分享...表白中</div>
        </div>
      </div>

      <div class="topic-card">
        <div class="topic-icon">📘</div>
        <div class="topic-content">
          <div class="topic-title">情感学院</div>
          <div class="topic-desc">专业课程老师指导</div>
        </div>
      </div>

      <div class="topic-card">
        <div class="topic-icon">🌟</div>
        <div class="topic-content">
          <div class="topic-title">生活的治愈...</div>
          <div class="topic-heat">32.6k 热度</div>
        </div>
      </div>
    </div>

    <!-- 用户资料 -->
    <template v-for="(user, index) in users" :key="user.name">
    <div class="user-profile" v-if="user">
      <div class="profile-header">
        <div class="profile-avatar">
          <img :src="user.avatar" :alt="user.name" />
        </div>
        <div class="profile-info">
          <div class="profile-name">
            {{ user.name }}
            <span class="badge verified" v-if="user.isVerified">✓</span>
            <span class="badge premium" v-if="user.isPremium">👑</span>
            <span class="badge verified-user" v-if="user.isRealNameVerified">已实名</span>
          </div>
          <div class="profile-details">
            {{ user.location }} · {{ user.age }}岁 · {{ user.height }}cm · {{ user.education }}
          </div>
        </div>
        <button class="follow-button">关注</button>
      </div>

      <div class="profile-bio">
        {{ user.bio }}
      </div>

      <!-- 照片网格 -->
      <div class="photo-grid">
        <div class="photo-item" v-for="(photo, index) in user.photos" :key="index">
          <img :src="photo" :alt="`Photo ${index + 1}`" />
        </div>
      </div>
      <!-- <div class="photo-grid">
        <div class="photo-item" v-for="(item, index) in user.photos" :key="index" @click="handleMediaClick(item, index)">
            <template v-if="isVideo(item)">
                <video :src="item" :poster="getVideoPoster(item)" ref="mediaRefs[index]" preload="metadata"></video>
            </template>
            <template v-else>
                <img :src="item" :alt="`Photo ${index + 1}`" ref="mediaRefs[index]">
            </template>
        </div>
    </div>
    全屏遮罩层 
    <div v-if="isFullscreen" class="fullscreen-overlay" @click="closeFullscreen">
        <template v-if="isVideo(currentMedia)">
            <video :src="currentMedia" ref="fullscreenMediaRef" autoplay controls></video>
        </template>
        <template v-else>
            <img :src="currentMedia" ref="fullscreenMediaRef">
        </template>
    </div>

      <!-- 互动数据 -->
      <div class="interaction-stats">
        <div class="post-date">{{ user.postDate }}</div>
        <div class="stats">
          <div class="stat-item">
            <span class="like-icon">👍</span>
            {{ user.likes }}
          </div>
          <div class="stat-item">
            <span class="comment-icon">💬</span>
            {{ user.comments }}
          </div>
        </div>
      </div>
    </div>
    </template>
    <!-- 底部提示卡片 -->
    <div class="bottom-prompt"  v-if="showPrompt">
      <div class="prompt-content">
        <div class="prompt-avatar">👻</div>
        <div class="prompt-text">#晒一下最喜欢的照片吧</div>
        <button class="share-button" @click="goShare()">去分享</button>
      </div>
      <button class="close-button" @click="closePrompt">×</button>
    </div>
    <!-- 底部导航栏 -->
    <FooterBar :nav-items="customNavItems" :unread-count="27" :has-new-notification="true" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'

const router = useRouter()
import FooterBar from '@/components/footerBar/FooterBar.vue';

// 定义用户数据
const users = ref(null);
const showPrompt=ref(true)
const closePrompt=()=>{
  showPrompt.value=false

}
// 模拟接口请求
const fetchUserProfile = async () => {
  try {
    const response = await request({
      url: '/api/user-profile',
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data' // 必须设置
      }
    })
    
    console.log('发布成功:', response)
    const data=response.data
    users.value = data;
  } catch (error) {
    console.error(error)
  }

};
// 组件挂载时获取数据
onMounted(() => {
  fetchUserProfile();
});


// 处理导航点击
const goShare = () => {
  // 可以在这里添加点击逻辑
  router.push('/Share');
 
}
const customNavItems = ref([
  {
    path: '/recommend',
    name: '推荐',
    icon: '🔍',
    badgeType: null
  },
  {
    path: '/meet',
    name: '见面',
    icon: '👥',
    forceHighlight: true // 强制高亮当前页
  },]);

</script>

<style scoped>
.profile-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 414px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #e9d5ff, #fff1f2);
  position: relative;
  padding-bottom: 60px;
  overflow-y: auto; /* 启用垂直滚动 */
  -webkit-overflow-scrolling: touch; /* 启用iOS平滑滚动 */
  box-sizing: border-box; 
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  color: #000;
  font-weight: bold;
}

.status-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.battery {
  background-color: #ffeb3b;
  padding: 2px 4px;
  border-radius: 10px;
  font-size: 12px;
}

/* 导航标签样式 */
.nav-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  margin-bottom: 16px;
}

.tabs-container {
  display: flex;
  gap: 24px;
}

.tab {
  font-size: 16px;
  color: #666;
  position: relative;
  padding-bottom: 4px;
}

.tab.active {
  color: #000;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #6366f1;
  border-radius: 3px;
}

.topic-square {
  color: #666;
  font-size: 14px;
}

/* 话题卡片样式 */
.topic-cards {
  display: flex;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.topic-card {
  background-color: white;
  border-radius: 12px;
  padding: 12px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.avatar-group {
  display: flex;
  margin-left: -8px;
}

.avatar-group img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid white;
}

.topic-icon {
  font-size: 24px;
}

.topic-content {
  flex: 1;
}

.topic-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.topic-status,
.topic-desc,
.topic-heat {
  font-size: 12px;
  color: #666;
}

/* 用户资料样式 */
.user-profile {
  padding: 16px;
  background-color: white;
  border-radius: 20px 20px 0 0;
  margin-top: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #6366f1;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 12px;
}

.badge.verified {
  background-color: #6366f1;
  color: white;
}

.badge.premium {
  background-color: #fbbf24;
  color: white;
}

.badge.verified-user {
  background-color: #10b981;
  color: white;
}

.profile-details {
  font-size: 14px;
  color: #666;
}

.follow-button {
  background-color: #6366f1;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
}

.profile-bio {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}

/* 照片网格样式 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}

.photo-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 互动数据样式 */
.interaction-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
}

.post-date {
  color: #666;
  font-size: 14px;
}

.stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

/* 底部提示卡片样式 */
.bottom-prompt {
  position: fixed;
  bottom: 70px;
  left: 16px;
  right: 16px;
  background-color: #6366f1;
  border-radius: 20px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  max-width: 382px;
  margin: 0 auto;
}

.prompt-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prompt-avatar {
  font-size: 24px;
}

.share-button {
  background-color: white;
  color: #6366f1;
  border: none;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 14px;
}

.close-button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  padding: 4px;
}

.message-count {
  position: absolute;
  top: -4px;
  right: -8px;
  background-color: #f87171;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
}

.notification-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f87171;
}

.half-screen-overlay {
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.half-screen-overlay video,
.half-screen-overlay img {
    max-width: 100%;
    max-height: 100%;
}
</style>